<script setup>
import axios from "axios";
import { ref, onMounted,h } from "vue";
import { ElNotification } from 'element-plus'
onMounted(() => {
  getUserData();
});
const getUserData = async () => {
  let { data } = await axios.get("http://localhost:3000/messages");
  tableData.value = data;
};

const tableData = ref([]);

const deleteRow = async (index, id) => {
  // console.log(id, index);
  tableData.value.splice(index, 1);
  await axios.delete(`http://localhost:3000/messages/${id}`);
  ElNotification({
    title: '提示',
    type: "info",
    message: h('i', { style: 'color: red' }, `id为${id}的留言被删除`),
  })
  getUserData();
};
const dialogTableVisible = ref(false);
const myGotMes = ref([]);
const isShow = (id) => {
  myGotMes.value = tableData.value.find((item) => item.id == id);
  dialogTableVisible.value = true;
  // console.log(id);
};
</script>

<template>
  <div class="user">
    <h1>消息管理:</h1>
    <hr>
    <br />
    <el-table :data="tableData" style="width: 100%" max-height="650">
      <el-table-column fixed prop="username" label="名字" width="150" />
      <el-table-column fixed prop="id" label="id" width="100" />
      <el-table-column prop="img" label="头像" width="100">
        <template #default="scope">
          <img
            :src="scope.row.img"
            alt="头像"
            style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="time" label="留言时间" width="150" />
      <el-table-column prop="likes" label="点赞数量" width="100">
        <template #default="scope">
          <span>{{ scope.row.likes.length }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="likes" label="点赞人的id" width="100">
        <template #default="scope">
          <ul>
            <li v-for="item in scope.row.likes" :key="item">{{ item }}&nbsp;&nbsp;</li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="留言" width="600" />
      <el-table-column prop="replies" label="收到的回复" width="150">
        <template #default="scope">
          <span @click="isShow(scope.row.id)">{{ scope.row.replies.length }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="replies" label="回复者ID" width="150">
        <template #default="scope">
          <ul>
            <li v-for="item in scope.row.replies" :key="item">
              {{ item.userId }}&nbsp;&nbsp;
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="删除" width="80">
        <template #default="scope">
          <el-button
            link
            type="danger"
            size="small"
            @click.prevent="deleteRow(scope.$index, scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogTableVisible" title="收到的回复" width="800">
      <ul class="myGotMes" v-if="myGotMes.replies.length>0">
        <li v-for="item in myGotMes.replies" :key="item.id">
          <div class="mes">
            <img :src="item.img" alt="" />
            <span>{{ item.username }}</span>
            <span>{{ item.time }}</span>
          </div>

          <div class="content">{{ item.content }}</div>
        </li>
      </ul>
      <el-empty description="没得回复" v-else/>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.myGotMes {
  display: flex;
  flex-direction: column;
  .mes {
    display: flex;
    height: 40px;
    // background-color: red;
    align-items: center;
    span{
      margin: 0 10px;
    }
    img {
      margin-right: 5px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
  .content {
    margin-left: 5%;
  }
}
</style>
